<template>
  <div class="order">
    <div class="tu">
      <div class="jindu">
        <div class="tiao">
          <div class="lanse" :style="obj"></div>
        </div>
        <div class="yuanbox">
          <div class="yuanzibox">
            <div class="yuan">
              <img v-if="jindu>=1" src="../../assets/img/mai1.png" alt />
              <img v-if="jindu<1" src="../../assets/img/mai1_n.png" alt />
            </div>
            <div class="zi">购买</div>
          </div>
          <div class="yuanzibox">
            <div class="yuan">
              <img v-if="jindu>=2" src="../../assets/img/mai3.png" alt />
              <img v-if="jindu<2" src="../../assets/img/mai3_n.png" alt />
            </div>
            <div class="zi">收货</div>
          </div>
          <div class="yuanzibox">
            <div class="yuan">
              <img v-if="jindu>=3" src="../../assets/img/mai2.png" alt />
              <img v-if="jindu<3" src="../../assets/img/mai2_n.png" alt />
            </div>
            <div class="zi">支付</div>
          </div>
          <div class="yuanzibox">
            <div class="yuan">
              <img v-if="jindu>=4" src="../../assets/img/mai4.png" alt />
              <img v-if="jindu<4" src="../../assets/img/mai4_n.png" alt />
            </div>
            <div class="zi">完成</div>
          </div>
        </div>
      </div>
    </div>
    <div class="zhuangtai">
      <div>订单状态：{{details.show_status}}</div>
      <div>订单号：{{details.order_sn}}</div>
      <div>{{details.format_add_time}}</div>
    </div>
    <div class="gray"></div>
    <div class="address">
      <div>收货人：{{details.consignee}}</div>
      <div>电话：{{details.mobile}}</div>
      <div>地址：{{details.show_address}}</div>
    </div>
    <div class="gray"></div>
    <div class="yao">
      <p class="tit">{{details.goods_group_name}}</p>
      <div class="yaopin" v-for="(item,index) in details.goods_list" :key="index">
        <img :src="item.goods_thumb" alt />
        <div class="yaodetails">
          <p class="yaop1">{{item.goods_name}}</p>
          <p class="yaop2" v-if="item.goods_attr!=''">规格： {{item.goods_attr}}</p>
          <div class="yaoqianshu">
            <p class="yaoqian" v-if='item.goods_price!="0.00"'>￥{{item.goods_price}}</p>
            <p class="yaoqian" v-if='item.goods_price=="0.00"'></p>
            <p class="yaoshu">x{{item.goods_number}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="gray"></div>
    <div class="juan">
      <!-- <div class="juan-item">
        <div class="juan-item-l">优惠券</div>
        <div class="juan-item-r">
          <div>无可用</div>
         
        </div>
      </div>
      <div class="juan-item">
        <div class="juan-item-l">积分</div>
        <div class="juan-item-r">
          <div>共0积分</div>
         
        </div>
      </div>-->
      <div class="juan-item">
        <div class="juan-item-l">备注</div>
        <div class="juan-item-r">{{details.postscript}}</div>
      </div>
    </div>
    <div class="gray"></div>
    <div class="jine">
      <div class="jine-item" v-if='details.goods_amount!="0.00"'>
        <p class="jine-p1">商品金额</p>
        <p class="jine-p2">￥{{details.goods_amount}}</p>
      </div>
      <div class="jine-item" v-if='details.goods_amount!="0.00"'>
        <p class="jine-p1">优惠</p>
        <p class="redqian jine-p2">-￥{{details.bonus}}</p>
      </div>
      <div class="jine-item" v-if='details.goods_amount!="0.00"'>
        <p class="jine-p1">合计</p>
        <p class="redqian jine-p2">￥{{details.order_amount}}</p>
      </div>

       <div class="jine-item" v-if='details.goods_amount=="0.00"'>
        <p class="jine-p1">所需积分</p>
        <p class="jine-p2">{{details.integral}}分</p>
      </div>
     
    </div>

    <div class="btnbox">
      
        
        <div class="zhifu" v-if="details.show_type == 'to_ship'">等待发货</div>
        <div class="zhifu" v-if="details.show_type == 'to_pay'">待付款</div>
        <div
          class="btn"
          v-if="details.show_type == 'to_comment'"
          @click.stop="pinglun(details.order_id)"
        >去评价</div>
        <div
          class="btn"
          @click.stop="queren(details.order_id)"
          v-if="details.show_type == 'to_receipt'"
        >确认收货</div>

        <div class="btn" v-if="details.order_status == '0'" @click.stop="quxiao(details.order_id)">取消订单</div>
      </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      jindu: "",
      obj: { width: 0 },

      order_id: "",
      details: ""
    };
  },
  methods: {
    queren(id) {
      this.$axios({
        method: "post",
        url: "api/gzh_mine.php?action=ar_order",
        data: this.$qs.stringify({
          uid: localStorage.getItem("uid"),
          order_id: id
        }),
        headers: {
          // 'Content-Type': 'application/x-www-form-urlencoded'
          // 'content-Type' : 'application/json'
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response.data);
        if (response.data.error == 0) {
          this.$toast(response.data.msg); // this.$router.push({name:'my-order'})
        } else {
          this.$toast(response.data.msg);
        }
      });
    },
    quxiao(id) {
      this.$axios({
        method: "post",
        url: "/api/gzh_mine.php?action=cancel_order",
        data: this.$qs.stringify({
          uid: localStorage.getItem("uid"),
          order_id: id
        }),
        headers: {
          // 'Content-Type': 'application/x-www-form-urlencoded'
          // 'content-Type' : 'application/json'
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response.data);
        if (response.data.error == 0) {
            this.$toast('取消成功')
            this.getdetails();
        } else {
          
        }
      });
    },
    // 跳转评论
    pinglun(id) {
      this.$router.push({
        //核心语句
        path: "/gopingjia", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          order_id: id
        }
      });
    },
    getdetails() {
      // /api/gzh_mine.php?action=order_info
      this.$get("/api/gzh_mine.php?action=order_info", {
        uid: localStorage.getItem("uid"),
        order_id: this.order_id
      })
        .then(res => {
          this.details = res.data;
          this.jindu = res.data.step;
          if (this.jindu == 1) {
            this.obj.width = 0;
          } else if (this.jindu == 2) {
            this.obj.width = "33.333%";
          } else if (this.jindu == 3) {
            this.obj.width = "66.666%";
          } else if (this.jindu == 4) {
            this.obj.width = "100%";
          }
        })
        .catch(err => {});
    }
  },
  created() {
    this.order_id = this.$route.query.order_id;
    // this.order_id=101
    this.getdetails();
  }
};
</script>

<style scoped>
.order {
  width: 100%;
}
.zhuangtai {
  width: 100%;
  height: 165px;
  background: rgba(255, 255, 255, 1);
  border-radius: 25px;
  padding: 0 30px;
  box-sizing: border-box;
}
.zhuangtai div {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 36px;
  margin-top: 20px;
}
.address {
  width: 100%;
  height: 165px;
  background: rgba(255, 255, 255, 1);
  border-radius: 25px;
  padding: 0 30px;
  box-sizing: border-box;
}
.address div {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 36px;
  margin-top: 20px;
}

.jiantou {
  width: 15px;
  height: 22px;
}
.gray {
  width: 100%;
  height: 10px;
  background: #f6f6f6;
}
/* 药品信息 */
.yao {
  width: 100%;
  /* height: 282px; */
  padding: 0 30px;
  box-sizing: border-box;
}
.yao .tit {
  font-size: 28px;
  color: #0b0a0a;
  line-height: 80px;
  width: 100%;
  height: 80px;
  font-weight: bold;
}
.yaopin {
  display: flex;
  align-items: center;
  width: 100%;
  height: 182px;
}
.yaopin img {
  width: 135px;
  height: 135px;
  margin-right: 28px;
  border: 1px solid #f7f7f7;
}
.yaodetails {
  width: 500px;
}
.yaodetails .yaop1 {
  font-size: 32px;
  color: #333;
  font-weight: bold;
}
.yaodetails .yaop2 {
  font-size: 24px;
  color: #666;
  margin-top: 5px;
}
.yaoqianshu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
}
.yaoqianshu .yaoqian {
  font-size: 28px;
  color: #c94451;
}
.yaoqianshu .yaoshu {
  font-size: 28px;
  color: #333;
}

/* 优惠券列表 */
.juan {
  width: 100%;
  /* height: 272px; */
  padding: 20px 30px;
  box-sizing: border-box;
  /* padding: 10px 0; */
}
.juan-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 68px;
}
.juan-item .juan-item-l {
  font-size: 30px;
  color: #333;
  width: 20%;
}
.juan-item .juan-item-r {
  width: 80%;
  font-size: 28px;
  color: #333;
  display: flex;
  align-items: center;
  word-break: break-all;
}

/* 金额 */
.jine {
  width: 100%;
  height: 255px;
  padding: 0 30px;
  box-sizing: border-box;
  margin-bottom: 150px;
}
.jine .jine-item {
  width: 100%;
  height: 63px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jine-item .jine-p1 {
  font-size: 30px;
  color: #333;
}
.jine-item .jine-p2 {
  font-size: 30px;
  color: #333;
}
.jine-item .redqian {
  color: #c94451;
}

.jindu {
  width: 100%;
  height: 150px;
  background-color: #f6f6f6;
  display: flex;
  /* align-items: center; */
  justify-content: center;
  position: relative;
}
.tiao {
  margin-top: 52px;
  width: 80%;
  height: 6px;
  background-color: #e0e0e0;
  /* position: relative; */
}
.lanse {
  /* width:33.33%; */
  height: 100%;
  background-color: #3ebf52;
}
.yuanbox {
  width: calc(80% + 58px);
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
}
.yuanzibox {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.yuanzibox .yuan {
  width: 58px;
  height: 58px;
  position: relative;
  /* background-color: #999; */
  position: relative;
}
.yuanzibox .yuan img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* width: 58px;
  height: 58px; */
}
.yuanzibox .zi {
  margin-top: 10px;
  font-size: 26px;
}
.btnbox {
  width: 100%;
  height: 98px;
  margin-top: 100px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
}
.zhifu {
  margin-right: 20px;
  width: 150px;
  height: 60px;
  /* background-color: #3ebf52; */
  line-height: 60px;
  text-align: center;
  font-size: 30px;
  color: #ccc;
  border: 1px solid #ccc;
  border-radius: 40px;
}
.btn {
  margin-right: 20px;
  width: 150px;
  height: 60px;
  background-color: #3ebf52;
  line-height: 60px;
  text-align: center;
  font-size: 30px;
  color: #fff;
  border-radius: 40px;
}
.shanchu {
  width: 100px;
  height: 100%;
  background-color: red;
}
</style>